<template>
	<view>

		<!-- <button @click="$refs.popupcheck.open()">打开</button> -->
		<uni-popup ref="popupcheck" type="bottom">
			<view style="background: #fff;">
				<view
					style="display: flex;background: #fff;padding: 10px;width: calc(100% - 10px);box-sizing: border-box;margin-left: 5px;justify-content: space-between;">

					<view style="color: #000;font-size: 20px;float: left;" @click="close">取消</view>


					<view style="color: green;font-size: 20px;float: right;" @click="submit">确认</view>


				</view>

				<uni-data-checkbox mode="tag" multiple v-model="checkbox" :localdata="hobby" @change="change">
				</uni-data-checkbox>


			</view>
		</uni-popup>

	</view>
</template>

<script>
	//不想双向绑定了
	export default {
		data() {
			return {
				checkboxRows: [],
				checkbox: [],
				hobby: [{
					text: '楼层',
					value: 0
				}, {
					text: '位置',
					value: 1
				}, {
					text: '专业',
					value: 2
				}, {
					text: '赵锦涛',
					value: 3
				}, {
					text: '崔楠',
					value: 4
				}, {
					text: '路保军',
					value: 5
				}, {
					text: '董晨',
					value: 6
				}, {
					text: '姚芳婷',
					value: 7
				}, {
					text: '张棣',
					value: 8
				}],
			}
		},
		methods: {
			open(user = []) {
				if (!user) {
					user = []
				}
				this.checkbox = []
				user.forEach(item => {
					this.checkbox.push(item.value)
				})
				this.checkboxRows = user

				this.$refs.popupcheck.open()
			},
			close() {
				this.$refs.popupcheck.close()
			},
			change(e) {
				console.log(e)
				console.log(this.checkbox)
				this.checkboxRows = e.detail.data
			},
			submit() {

				this.$emit('subclickRow', this.checkboxRows)
				this.$emit('subclickId', this.checkbox)
				this.$refs.popupcheck.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.checklist-group {
		display: block !important;
		width: 100%;
		height: 40vh;
		padding: 0px 10px 10px 10px;

		box-sizing: border-box;
		text-align: center;
		overflow: auto;
	}

	/deep/.checklist-box {
		display: block !important;
		margin: 5px !important;
	}

	/deep/.checklist-content {

		display: block !important;
	}
</style>
